<template>
    <div class="radio-group " :class="modelClass">
        <div class="radio-item "
             :style="itemStyles"
             v-for="(each , i) in optionList"
             :key="i">
            <span class="radio-text" :class="isActive(each.value) && 'active'" @click="handleChange(each)">
                 {{ each.value }}
            </span>
        </div>
    </div>
</template>

<script>
    export default {
        props   : {
            value: String,
            item : Object,
        },
        data() {
            return {
                select: '',
            }
        },
        computed: {
            optionList() {
                return this.item.options;
            },
            modelClass() {
                let model = this.item.model;

                return [ 'group', 'item' ].includes(model) ? model : 'group';
            },
            selectType() {
                let type = this.item.type;
                return [ 'radio', 'checkbox' ].includes(type) ? type : 'radio';
            },
            itemStyles() {
                let result = {};

                if (this.modelClass === 'item' && this.item.size) {
                    result[ 'flex' ] = this.item.size;
                }

                return result;
            }
        },
        mounted() {
            if (this.selectType === 'checkbox')
                this.$set(this, 'select', []);
        },
        methods : {
            isActive(value) {
                if (this.selectType === 'radio') {
                    return value === this.select;
                } else {
                    return this.select.includes(value);
                }
            },
            handleChange(item) {
                let value = item.value;

                if (this.selectType === 'checkbox') {
                    if (this.select.includes(value)) {
                        let index = this.select.indexOf(value);
                        if (index > -1) {
                            this.select.splice(index, 1);
                        }

                    } else {
                        this.select.push(value);
                    }
                    value = this.select.join(',');

                } else {
                    this.select = value;
                }

                this.$emit('input', value);
            },
            handleCheckboxChange(value) {

            },
            handleRadioChange(value) {


            },
        }
    }
</script>

<style scoped>

</style>
